<template>
	<view class="wrap">
		<view>
			<view class="address_search">
				<u-search placeholder="搜索收件人姓名" @click="selectAddresses" :showAction="false" disabled></u-search>
			</view>
			<scroll-view class="cate_menu">
				<view class="cate_item" :class="active == index ? 'active' : ''" v-for="(item, index) in list"
					@click="toggle_tab(index)">{{item.name}}</view>

				<view class="cate_item" @click="toGroup">分组管理<text
						class="iconfont fr icon-xiayiyeqianjinchakangengduo"></text></view>
			</scroll-view>
			<scroll-view class="address_list" scroll-y="true">

				<view class="address_box">
					<view v-for="(item, index) in list" :key="index">
						<view v-if="active == index">
							<view v-for="(items, i) in item.list" :key="i">
								<view class="item" v-if="item.list">
									<view class="title">
										<view class="name">
											<text>{{ items.name }}</text> <text>{{ items.phone }}</text>
										</view>
										<text>{{ items.region +  items.detail}}</text>
									</view>
									<view class="t_btn">
										<view class="items">
											<view v-if="type" @click="setAddr(items)">
												<view class="t_check"></view> <text class="d_text">选择地址</text>
											</view>
										</view>
										<view class="items">
											<text class="iconfont icon-shanchu"
												@click="handleDel(items.address_id)"></text>
											<text class="iconfont icon-tianxie"
												@click="handleEdit(items.address_id)"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="add_btn">
					<button class="button btn-normal" @click="handleAdd">添加地址</button>
				</view>
			</scroll-view>
		</view>



		<view>
			<u-popup :show="show" :round="10" mode="bottom" @close="close" :closeable="true">
				<view class="address_pop">
					<view class="title">搜索地址</view>
					<view class="address_search">
						<u-search placeholder="搜索收件人姓名" v-model="keyword" :showAction="false"></u-search>
					</view>
					<scroll-view class="address_pop_list" scroll-y>
						<view class="items" v-for="(item, i) in lists">
							<view class="items_l">
								<text>{{ item.name }} {{ item.phone }}</text>
								<text>{{ item.region }}{{ item.detail }}</text>
							</view>

							<view class="item_btn">
								<view class="i_l">
									<label  @click="setAddr(item)" v-if="type">
										<radio class="radio" color="#fff"></radio>
										<text class="text">选择地址</text>
									</label>
								</view>
								<view class="i_r">
									<view @click="handleEdit(item.address_id)"><text
											class="iconfont icon-tianxie"></text> </view>
									<view @click="handleDel(item.address_id)"><text
											class="iconfont icon-shanchu"></text> </view>
								</view>
							</view>
						</view>
					</scroll-view >
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		addr_list,
		del_address,
		address_list
	} from "@/api/address.js"
	import {
		checkoutInfo
	} from '@/stores/checkout.js';

	const addressStore = checkoutInfo();

	const active = ref(0); // 选中分组标记
	const list = ref([]);
	const type = ref(null); // 购物车下单选择地址标记

	const show = ref(false);
	const lists = ref([]); // 搜索用地址列表
	const keyword = ref('');

	onLoad((option) => {
		type.value = option.type
	})


	onShow(() => {
		get_list();
	});


	// 监听变化
	watch(() => keyword.value, (newValue, oldValue) => {
			get_lists(newValue);
	});



	// 储存下单选择地址
	function setAddr(item) {
		addressStore.setAddress(item);
		uni.navigateBack()
	}


	// 获取列表
	function get_list() {
		addr_list().then(res => {
			let data = res.data;
			list.value = data.list;
			get_lists();
		})
	}
	function selectAddresses() {
		show.value = true;
	}

	// 无分组地址
	function get_lists(key) {
		address_list({
			key: key || ''
		}).then(res => {
			let data = res.data;
			if (key) {
				lists.value = filterList(key, data);
			} else {
				lists.value = data;
			}
		})
	}

	function filterList(keys, list) {
		let arr = [];
		for (let i = 0; i < list.length; i++) {
			if (list[i].name.indexOf(keys) > -1) {
				arr.push(list[i]);
			}
		}
		return arr;
	}

	// 关闭弹窗的方法
	const close = () => {
		show.value = false;
	};

	// 切换分组
	function toggle_tab(index) {
		active.value = index
	}

	// 删除地址
	function handleDel(address_id) {
		uni.showModal({
			content: '您确定要移除当前地址信息吗?',
			success: function(res) {
				if (res.confirm) {
					del_address(address_id).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							success() {
								setTimeout(function() {
									get_list();
								}, 1000);
							}
						});
					})
				}
			}
		});
	}


	// 添加地址
	function handleAdd() {
		uni.navigateTo({
			url: '/pages/address/info'
		});
	}


	// 编辑地址
	function handleEdit(address_id) {
		uni.navigateTo({
			url: `/pages/address/info?address_id=${address_id}`
		});
	}


	// 分组管理址
	function toGroup() {
		uni.navigateTo({
			url: '/pages/address/group'
		});
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #f8f8f8 !important;
	}

	.wrap {
		overflow: auto;
		background-color: #f8f8f8 !important;
	}

	.cate_menu {
		width: 24%;
		height: 100vh;
		float: left;
		position: fixed;
		border-right: 1px solid #eee;
		background-color: #fff;

		.cate_item {
			text-align: center;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #666;
		}

		.active {
			background-color: #f8f8f8;
			color: #f9ae3d;
			font-weight: 600;
		}
	}

	.address_list {
		width: 75%;
		float: right;

		.address_box {
			width: 100%;
			height: 80vh;
			overflow: auto;
			padding: 20rpx;

			.item {
				width: 100%;
				overflow: hidden;
				background-color: #fff;
				border-radius: 10px;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;

				.title {
					overflow: hidden;
					border-bottom: 1px solid #f2f2f2;
					padding-bottom: 20rpx;

					.name {
						font-size: 28rpx;
						font-weight: 600;
						padding-bottom: 10rpx;
						color: #333;

						text {
							margin-right: 20rpx;
						}
					}

					text {
						font-size: 26rpx;
						color: #666;
					}
				}

				.t_btn {
					width: 100%;
					overflow: hidden;
					display: flex;
					padding-top: 20rpx;

					.items {
						flex: 1;

						.t_check {
							float: left;
						}

						.d_text {
							font-size: 24rpx;
							float: left;
							padding-left: 10rpx;
							padding-top: 3rpx;
							color: #666;
						}

						.iconfont {
							float: right;
							color: #666;
							margin-left: 50rpx;
						}
					}

				}
			}
		}

		.add_btn {
			padding: 30rpx;

			.button {
				background: linear-gradient(to right, #f9211c, #ff6335);
			}
		}
	}


	.address_search {
		padding: 0 10px;
		margin-bottom: 10rpx;
	}

	.icon-xiayiyeqianjinchakangengduo {
		float: right;
		padding: 4rpx 10rpx 0 0;
	}

	.address_pop {
		padding: 20rpx 30rpx 100rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.address_pop_list {
			height: 800rpx;
			overflow: hidden;
			overflow-y: auto;

			.item_btn {
				width: 100%;
				overflow: hidden;
				padding: 10rpx 0;
				color: #666;

				.i_l {
					width: 30%;
					float: left;
					font-size: 24rpx;
				}

				.i_r {
					float: right;

					view {
						float: left;
						padding-left: 30rpx;

						.iconfont {
							margin-right: 10rpx;
						}
					}
				}
			}

			.items {
				width: 100%;
				overflow: hidden;
				position: relative;
				padding: 20rpx;
				border-bottom: 1rpx solid #eee;

				.items_l {
					width: 80%;
					float: left;

					text {
						font-size: 26rpx;
						color: #666;
						width: 100%;
						display: block;
						padding: 10rpx 0;
					}
				}

				.check {
					top: 30rpx
				}
			}
		}
	}
</style>